<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/metrize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/polaris/polaris.css" rel="stylesheet">
    <link href="css/ui.fancytree.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="header-content header-fixed bg-white clearfix">
    <!--  Logo -->
    <div class="logo bg-dark">
        <a href="#"><span class="logo-icon fa fa-th-large"></span> <span class="logo-text">JP</span></a>
    </div>

    <div class="top-nav">
        <ul class="list-none nav-left">
            <!-- to left menu -->
            <li class="unshow"><a class="toggle-min jp-gray jp-ripple" href="#"><i class="fa fa-bars"></i></a></li>
            <!-- dropdown settings -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown" id="dropdownMenu2"><i class="fa fa-gear"></i></a>
                <div class="dropdown-menu panel panel-default with-arrow" aria-labelledby="dropdownMenu2">
                    <div class="panel-heading"><span>Setting</span></div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <p>User setting</p>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p>User setting</p>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1"> 2
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1"> 3
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-truck"></i></a></li>
        </ul>

        <ul class="list-none nav-right pull-right">
            <!-- user info-->
            <li class="nav-profile dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown"><img src="img/t.jpg" class="img-circle img30_30" /> <span class="hidden-xs">LISA</span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Action</a></li>
                    <li><a href="#"><i class="fa fa-television"></i>Another action</a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i>Something else here</a></li>
                    <li><a href="#"><i class="fa fa-table"></i>Separated link</a></li>
                </ul>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-wifi"></i></a></li>
        </ul>
    </div>

</header>
<div class="main-content">
    <!-- left nav -->
    <div class="nav-content bg-dark nav-vertical">
        <ul class="left-menu list-none">
            <li class="user-info">
                <div class="user-panel">
                    <div class="pull-left">
                        <img src="img/t.jpg" class="img-circle img45_45"/>
                    </div>
                    <div class="pull-left info">
                        <p>welcome,admin</p>
                        <a href="#"><i class="fa fa-circle"></i> online</a>
                    </div>
                </div>
                <form class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </li>
            <li class="treeview ">
                <a href="main.html" class="jp-ripple"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-television"></i><span>JP UI</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Buttons.html" ><i class="fa fa-circle ng-scope"></i><span>Buttons</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Icons.html" ><i class="fa fa-circle ng-scope"></i><span>Icons</span></a></li>
                    <li class="jp-ripple"><a href="Typography.html"><i class="fa fa-circle ng-scope"></i><span>Typography</span></a></li>
                    <li class="jp-ripple"><a href="Lists.html"><i class="fa fa-circle ng-scope"></i><span>Lists</span></a></li>
                    <li class="jp-ripple"><a href="Forms.html"><i class="fa fa-circle ng-scope"></i><span>Forms</span></a></li>
                    <li class="jp-ripple"><a href="Components.html"><i class="fa fa-circle ng-scope"></i><span>Components</span></a></li>
                    <li class="jp-ripple"><a href="Panels.html"><i class="fa fa-circle ng-scope"></i><span>Panels</span></a></li>
                    <li class="jp-ripple"><a href="Grids.html"><i class="fa fa-circle ng-scope"></i><span>Grids</span></a></li>
                    <li class="jp-ripple"><a href="Timeline.html"><i class="fa fa-circle ng-scope"></i><span>Timeline</span></a></li>
                    <li class="jp-ripple"><a href="Tree.html"><i class="fa fa-circle ng-scope"></i><span>Tree</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-file-o"></i><span>Pages</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="SignIn.html"><i class="fa fa-circle ng-scope"></i><span>Sign In</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="SignUp.html"><i class="fa fa-circle ng-scope"></i><span>Sign Up</span></a></li>
                    <li class="jp-ripple"><a href="ForgotPassword.html"><i class="fa fa-circle ng-scope"></i><span>Forgot Password</span></a></li>
                    <li class="jp-ripple"><a href="404.html"><i class="fa fa-circle ng-scope"></i><span>404 Error</span></a></li>
                    <li class="jp-ripple"><a href="500.html"><i class="fa fa-circle ng-scope"></i><span>500 Error</span></a></li>
                    <li class="jp-ripple"><a href="Blank.html"><i class="fa fa-circle ng-scope"></i><span>Blank Page</span></a></li>
                    <li class="jp-ripple"><a href="Profile.html"><i class="fa fa-circle ng-scope"></i><span>Profile</span></a></li>
                    <li class="jp-ripple"><a href="Invoice.html"><i class="fa fa-circle ng-scope"></i><span>Invoice</span></a></li>
                </ul>
            </li>
            <li class="treeview active">
                <a href="#" class="jp-ripple"><i class="fa fa-table"></i><span>Tables</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple active"><a href="Basetable.html"><i class="fa fa-circle ng-scope"></i><span>Base Table</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Responsivetables.html"><i class="fa fa-circle ng-scope"></i><span>Responsive Tables</span></a></li>
                    <li class="jp-ripple"><a href="DataTables.html"><i class="fa fa-circle ng-scope"></i><span>Data Tables</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-pencil"></i><span>Forms</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="FormComponents.html"><i class="fa fa-circle ng-scope"></i><span>Form Components</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="WizardForm.html"><i class="fa fa-circle ng-scope"></i><span>Wizard Form</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-bar-chart"></i><span>Charts</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="EChartsLine.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Line</span></a></li>
                    <li class="jp-ripple"><a href="EChartsBar.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Bar</span><span class="badge badge-primary ng-scope">5</span></a></li>
                    <li class="jp-ripple"><a href="EChartsPie.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Pie</span></a></li>
                    <li class="jp-ripple"><a href="EChartsScatter.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Scatter</span></a></li>
                </ul>
            </li>
            <li class="menu-divider"></li>
            <li class="nav-title">
                <span>Title</span>
            </li>
            <li class="li-sm active">
                <a href="#"><i class="fa fa-circle color-info"></i><span>JP Components</span></a>
            </li>
            <li class="li-sm treeview">
                <a href="#"><i class="fa fa-circle color-success"></i><span>JP Elements</span></a>
            </li>
        </ul>

    </div>
    <!-- content -->
    <div class="content">
        <section class="jppage">
            <div class="row">
                <!-- Table -->
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Table</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="jp-panel">
                        <div class="panel-body">
                            <table class="table">
                                <caption>Optional table caption.</caption>
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                    <td><span class="label label-info">Pending</span></td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                    <td><span class="label label-primary">Due</span></td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                    <td><span class="label label-success">Due</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Table Style -->
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Table Style</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="jp-panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <table class="table table-striped">
                                                <caption>STRIPED TABLE</caption>
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>Mark</td>
                                                    <td>Otto</td>
                                                    <td>@mdo</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td>Larry</td>
                                                    <td>the Bird</td>
                                                    <td>@twitter</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <table class="table table-bordered">
                                                <caption>BORDERED TABLE</caption>
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>Mark</td>
                                                    <td>Otto</td>
                                                    <td>@mdo</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td>Larry</td>
                                                    <td>the Bird</td>
                                                    <td>@twitter</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <table class="table table-hover">
                                                <caption>HOVER ROW</caption>
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>Mark</td>
                                                    <td>Otto</td>
                                                    <td>@mdo</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td>Larry</td>
                                                    <td>the Bird</td>
                                                    <td>@twitter</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <table class="table table-condensed">
                                                <caption>CONDENSED TABLE</caption>
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>Mark</td>
                                                    <td>Otto</td>
                                                    <td>@mdo</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td colspan="2">Larry the Bird</td>
                                                    <td>@twitter</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">4</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">

                                            <table class="table table-bordered">
                                                <caption>CONTEXTUAL TABLE</caption>
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Column heading</th>
                                                    <th>Column heading</th>
                                                    <th>Column heading</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="primary">
                                                    <th scope="row">1</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr class="success">
                                                    <th scope="row">3</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">4</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr class="info">
                                                    <th scope="row">5</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">6</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr class="warning">
                                                    <th scope="row">7</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">8</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                <tr class="danger">
                                                    <th scope="row">9</th>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                    <td>Column content</td>
                                                </tr>
                                                </tbody>
                                            </table>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin">
                        <div class="panel-heading bg-primary pd15">
                            <h2>Primary Table</h2>
                            <button aria-expanded="false" class="jp-btn jp-fb jp-primary jp-fb-xs jp-ripple jp-sw pull-right mgt3" href="#collapse1" role="button" data-toggle="collapse">
                                <i class="fa fa-sort-desc"></i>
                            </button>
                        </div>
                        <div class="panel-body">
                            <div class="collapse in" id="collapse1">
                                <table class="table table-striped">
                                    <thead>
                                    <tr class="primary">
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin">
                        <div class="panel-heading bg-success pd15">
                            <h2>Success Table</h2>
                            <button aria-expanded="false" class="jp-btn jp-fb jp-success jp-fb-xs jp-ripple jp-sw pull-right mgt3" href="#collapse2" role="button" data-toggle="collapse">
                                <i class="fa fa-sort-desc"></i>
                            </button>
                        </div>
                        <div class="panel-body">
                            <div class="collapse in" id="collapse2">
                                <table class="table table-striped">
                                    <thead>
                                    <tr class="success">
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin">
                        <div class="panel-heading bg-info pd15">
                            <h2>Info Table</h2>
                            <button aria-expanded="false" class="jp-btn jp-fb jp-info jp-fb-xs jp-ripple jp-sw pull-right mgt3" href="#collapse3" role="button" data-toggle="collapse">
                                <i class="fa fa-sort-desc"></i>
                            </button>
                        </div>
                        <div class="panel-body">
                            <div class="collapse in" id="collapse3">
                                <table class="table table-striped">
                                    <thead>
                                    <tr class="info">
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin">
                        <div class="panel-heading bg-dark pd15">
                            <h2>Dark Table</h2>
                            <button aria-expanded="false" class="jp-btn jp-fb jp-dark jp-fb-xs jp-ripple jp-sw pull-right mgt3" href="#collapse4" role="button" data-toggle="collapse">
                                <i class="fa fa-sort-desc"></i>
                            </button>
                        </div>
                        <div class="panel-body">
                            <div class="collapse in" id="collapse4">
                                <table class="table table-striped">
                                    <thead>
                                    <tr class="dark">
                                        <th>#</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Username</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin panel-line">
                        <div class="panel-heading bg-primary"></div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin panel-line">
                        <div class="panel-heading bg-success"></div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin panel-line">
                        <div class="panel-heading bg-info"></div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="jp-panel no-padding no-border no-margin panel-line">
                        <div class="panel-heading bg-dark"></div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>






<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jpripple.js"></script>
<script src="js/jquery.fancytree-all.min.js"></script>
<script src="js/all.js"></script>
<script>
    $(document).ready(function(){

    });
</script>
</body>
</html>